<template>
	<view class="pageview " :style="skin">
		<loading :isShow="pageLoadingShow" size="lg"></loading>
		<block v-if="!pageLoadingShow">
			<view class="pageview flex flex-direction" v-if="isOpen">
				<view class="top-warp">
					<zx-nav noTitle>
						<view slot="center" class="u-text-center" style="padding-left: 68px;position: relative;">
							{{ share_title }}
							<view class="cart" @tap="navTo('/pages/car/car', 'switchTab')">
								<u-badge max="99" :value="cartNum"></u-badge>
								<image :src="`${assetsPath}/cart.png`" mode="widthFix"></image>
							</view>
						</view>
					</zx-nav>
				</view>
				<view class="shop flex-sub">
					<view class="shop-bd flex">
						<scroll-view class="menu" scroll-y scroll-with-animation>
							<view
								v-for="(item, index) in menulist"
								:key="index"
								class="tab-bar-item flex align-center"
								:class="[currentTab == index ? 'active' : '']"
								:data-current="index"
								@tap.stop="swichNav"
							>
								<view class="name" :style="{ color: item.color }">
									{{ item.name }}
									<view class="tag" v-if="item.cart_num > 0 && showCount">
										<u-badge numberType="overflow" :bgColor="themeColor" max="99" :value="item.cart_num"></u-badge>
									</view>
								</view>
							</view>
						</scroll-view>
						<div class="flex-sub tab-view flex flex-direction">
							<view class="filterbar flex align-center">
								<span class="flex-sub" :class="{ active: !sales && !price }" @tap="filterOrder(0)">默认</span>
								<span class="flex align-center" :class="{ active: sales }" @tap="filterOrder(1)">
									<text>销量</text>
									<filter-icon :sort="sales"></filter-icon>
								</span>
								<span class="flex align-center" :class="{ active: price }" @tap="filterOrder(2)">
									<text>价格</text>
									<filter-icon :sort="price"></filter-icon>
								</span>
							</view>
							<view class="flex-sub">
								<mescroll-uni ref="mescrollItem0" :fixed="false" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
									<view class="goodslist">
										<pro-item
											:scrollTop="scrollTop"
											v-for="(items, indexs) in productList"
											:key="indexs"
											:proinfo="items"
											direction="row"
											:width="proWidth"
											:skeleton="!!items.skeleton"
											@changeNum="info => changeInfo(info, indexs)"
										></pro-item>
									</view>
								</mescroll-uni>
							</view>
						</div>
					</view>
				</view>
			</view>

			<mescroll-empty :option="option" @emptyclick="emptyClick" v-if="!isOpen"></mescroll-empty>
		</block>
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import MescrollEmpty from '@/uni_modules/mescroll-uni/components/mescroll-empty/mescroll-empty.vue';
import proItem from '@/components/pro-active-item.vue';
import searchbar from '@/components/searchbar';
import sharemixin from '@/common/sharemixin.js';
import filterIcon from '@/components/filter-icon.vue';
import loading from '@/components/loading';
export default {
	components: {
		proItem,
		searchbar,
		filterIcon,
		MescrollEmpty,
		loading
	},
	data() {
		return {
			menulist: [],
			activelist: [],
			currentTab: 0,
			cateId: 0,
			goodslist: 20,
			isInit: false,
			proWidth: uni.upx2px(200) + 'px',
			sales: '',
			price: '',
			productList: [],
			downOption: {
				auto: false
			},
			upOption: {
				auto: false,
				page: {
					num: 0,
					size: 10,
					time: null
				}
			},
			showCount: false,
			activeId: 3,
			isOpen: false,
			option: { tip: '该活动还没有开始', btnText: '返回首页' },
			pageLoadingShow: true
		};
	},
	mixins: [MescrollMixin, sharemixin],
	onLoad(options) {
		this.activeId = options.activeId || 3;
		this.share_page = '/pages/active/active3?activeId=' + this.activeId;
		this.getActiveInfo();
	},
	computed: {
		...mapState(['isLogin', 'userInfo', 'cartNum'])
	},
	watch: {},

	methods: {
		...mapActions(['getCarCount']),
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
			this.mescrollInitByRef && this.mescrollInitByRef(); // 兼容字节跳动小程序 (mescroll-mixins.js)
			// 自动加载当前tab的数据
			if (!this.isInit) {
				this.isInit = true; // 标记为true
				if (this.menulist.length > 0) {
					this.mescroll.resetUpScroll();
				}
			}
		},
		getActiveInfo() {
			this.$getAction(this.$api.getActiveInfo + this.activeId, null, {
				custom: {
					ShowLoading: false
				}
			}).then(da => {
				if (da.code == 0) {
					this.isOpen = da.data.active == 1;
					this.share_title = da.data.main_title;
					if (this.isOpen) {
						this.getCateList();
					}
					this.pageLoadingShow = false;
				}
			});
		},
		emptyClick() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		/* 获取商品分类 */
		getCateList() {
			this.$postAction(
				this.$api.getActiveCate,
				{
					active_id: this.activeId
				},
				{
					custom: {
						ShowLoading: false
					}
				}
			).then(da => {
				if (da.code == 0) {
					let menulist = da.data.map(item => {
						item.cid = item.id;
						return item;
					});
					this.menulist = [...menulist];
					if ((this.currentTab && !this.menulist[this.currentTab]) || !this.currentTab) {
						this.currentTab = 0;
					}

					if (this.isInit) {
						this.mescroll.resetUpScroll();
					}
				}
			});
		},
		swichNav(e) {
			let cur = e.currentTarget.dataset.current;
			if (this.currentTab == cur) {
				return false;
			} else {
				this.currentTab = cur;
				this.cateId = this.menulist[this.currentTab].id;
				let num = this.menulist[this.currentTab].count >= 6 ? 6 : this.menulist[this.currentTab].count;
				let productList = [];
				for (var i = 0; i < num; i++) {
					console.log('skeleton');
					productList.push({
						skeleton: true
					});
				}
				this.productList = [...productList];
				this.mescroll.scrollTo(0, 0);
				this.mescroll.resetUpScroll();
			}
		},
		upCallback() {
			this.getProductList();
		},
		/* 获取产品 */
		getProductList() {
			let $me = this;
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				page: pageNum,
				limit: pageSize
			};
			param.active_id = this.activeId;
			param.active_cid = this.menulist[this.currentTab].id;
			if (this.price) {
				param.order_by = 'price';
				param.order_by_type = this.price;
			} else if (this.sales) {
				param.order_by = 'total_sales';
				param.order_by_type = this.sales;
			}
			this.$postAction(this.$api.getProductList, param, {
				custom: {
					ShowLoading: false
				}
			})
				.then(da => {
					if (da.code == 0 && da.data && da.data.length > 0) {
						let curPageData = da.data;
						$me.mescroll.endBySize(curPageData.length, da.count);
						if ($me.mescroll.num == 1) $me.productList = []; //如果是第一页需手动制空列表
						$me.productList = $me.productList.concat(curPageData); //追加新数据
						console.log('$me.productList', $me.productList);
					} else {
						if ($me.mescroll.num == 1) $me.productList = [];
						$me.mescroll.endSuccess(0, false);
					}
				})
				.catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
		},
		//改变产品数量
		changeInfo(info, index) {
			let oldnum = this.productList[index].cart_num;
			let cid = this.productList[index].cid;
			for (var i = 0; i < this.menulist.length; i++) {
				if (this.menulist[i].cid == cid) {
					this.menulist[i].cart_num = this.menulist[i].cart_num + (info.cart_num - oldnum);
				}
			}
			this.productList[index] = { ...info };
			this.$forceUpdate();
		},
		filterOrder(type) {
			switch (type) {
				case 0: {
					this.sales = '';
					this.price = '';
					break;
				}
				case 1: {
					if (this.sales == 'desc') {
						this.sales = 'asc';
					} else if (this.sales == 'asc') {
						this.sales = '';
					} else {
						this.sales = 'desc';
					}
					this.price = '';
					break;
				}
				case 2: {
					if (this.price == 'desc') {
						this.price = 'asc';
					} else if (this.price == 'asc') {
						this.price = '';
					} else {
						this.price = 'desc';
					}
					this.sales = '';

					break;
				}
			}
			this.mescroll.resetUpScroll();
		}
	}
};
</script>

<style lang="scss" scoped>
.top-warp {
	z-index: 666;
	width: 100%;
	background: #fff;
	.lefttitle {
		font-size: 36upx;
		font-weight: 500;
		text-align: center;
		padding: 0 15upx 0 20upx;
	}
}

page,
.pageview {
	height: 100%;
	width: 100%;
	overflow: hidden;
	background: #fff;
}
.cart {
	position: absolute;
	right: -10px;
	top: 0;
	image {
		display: block;
		width: 46upx;
		height: 43upx;
	}
	::v-deep .u-badge {
		position: absolute;
		right: 0rpx;
		transform: translate(50%, -50%);
		top: 0;
		z-index: 999;
	}
}
.shop {
	min-height: 0;
	margin-top: 20upx;
}
.shop-bd {
	height: 100%;

	overflow: hidden;
	.menu {
		width: 172upx;
		overflow: auto;
		text-align: center;
		background: #f6f6f6;
		border-radius: 0 12upx 0 0;
		.tab-bar-item {
			color: #666;
			font-size: 26upx;
			font-weight: 400;
			text-align: center;
			margin: 0 auto;
			padding: 28upx 6upx 28upx 32upx;
			height: 82upx;
			.icon {
				width: 32upx;
				height: 32upx;
				vertical-align: middle;
				margin-top: -6upx;
			}

			.name {
				width: 4em;
				position: relative;

				.tag {
					position: absolute;
					top: -20upx;
					right: -20upx;
				}
			}

			&.active {
				color: #1c1c1e;
				background: #fff;
				font-weight: 500;
				position: relative;
				border-radius: 0px;

				&::after {
					position: absolute;
					top: 50%;
					left: 8upx;
					transform: translateY(-50%);
					content: '';
					width: 8upx;
					height: 34upx;
					border-radius: 92upx;
					background: var(--nav-bg);
				}
			}
		}
	}

	.tab-view {
		/* height: 100vh; */
		overflow: auto;
		background: #fff;
		margin-left: 18upx;
		margin-right: 30upx;
		.goodslist {
			margin-top: 16upx;
		}
	}
	.filterbar {
		font-size: 26upx;
		color: #999;
		line-height: 48upx;
		// padding-bottom: 20upx;
		.active {
			color: var(--nav-bg);
		}
		& > span + span {
			margin-left: 78upx;
		}
		image {
			width: 16upx;
			height: 22upx;
			margin-left: 8upx;
		}
	}
}
</style>
